<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #instruction {
            z-index: 99;
            position: absolute;
            top: 15px;
            left: 50%;
            padding: 5px;
            margin-left: -175px;
            height: 30px;
            width: 355px;
            background: rgba(25, 25, 25, 0.8);
            color: white;
        }

        .esri-popup__header{
            background-color: red;!important;
        }

        [class*=esri-popup--is-docked-bottom-] .esri-popup__content~.esri-popup__footer, [class*=esri-popup--aligned-top-] .esri-popup__content~.esri-popup__footer{
            display: none;!important;
        }

    </style>
    <link href="https://js.arcgis.com/4.21/esri/themes/light/main.css" rel="stylesheet"/>
    <script src="https://js.arcgis.com/4.21/"></script>
    <script>
        require(["esri/tasks/Locator", "esri/Map", "esri/views/MapView"], (Locator, Map, MapView) => {
            //使用世界地理编码服务创建一个定位器任务
            const locatorTask = new Locator({
                url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
            });

            let map = new Map({
                basemap: "streets-navigation-vector",
            });

            let view = new MapView({
                container: "viewDiv",
                map: map,
                center: [100.3, 33.9],
                zoom: 4
            });

            view.popup.autoCloseEnabled = false;//设置当视图摄像机或视点更改时，这将不自动关闭弹出窗口

            view.on("click", (event) => {
                //获取地图点的经纬度坐标
                let lat = Math.round(event.mapPoint.latitude * 1000) / 1000;
                let lon = Math.round(event.mapPoint.longitude * 1000) / 1000;

                view.popup.open({//在给定位置打开弹出窗口
                    title: "点击的位置为[" + lat + "," + lon + "]",
                    content: "点击的位置为[" + lat + "," + lon + "],您肯定没去过",
                    location: event.mapPoint,
                });

                locatorTask.locationToAddress({//将地点转为地址放在content中,上面设置的content将失效
                    location: event.mapPoint
                }).then((response) => {
                    // 如果成功找到地址，则将其显示在弹出窗口的内容中
                    view.popup.content = response.address;
                }).catch(() => {
                    //如果承诺失败且未找到结果，则显示通用消息
                    view.popup.content = "找不到此位置的地址";
                })
            });

        });
    </script>
</head>
<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="instruction">
    单击地图上的任何位置以查看其街道地址
</div>
</body>
</html>
